

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="{{STATIC_URL}}jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="{{STATIC_URL}}jquery.min.js"></script>
    <script src="{{STATIC_URL}}jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head> 
<body>

<div data-role="page" id="home"> 
<div data-role="header">

 <a href='/quiz/lecture/end/{{lecture.id}}' rel="external">End lecture</a>
  <h1 style="color:#FFFFFF;">Interactive Pad</h1>  
 
<div data-role="navbar">
	<ul>
<li><a onclick="$('#sideNoti').load('/quiz/lecture/getquizzes/{{lecture.id}}')"  class="ui-btn-active ui-state-persist" href="#" >Quizzes</a></li>
		<li><a    href="#"  onclick="$('#sideNoti').load('/messages/list/{{lecture.id}}')">Messaging Board</a></li>
	</ul>
</div><!-- /navbar -->   

    </div> 
<div data-role="content" data-theme="c" data-dividertheme="b">
  {% if quizes %}   
  {% for quiz in quizes %}
         <ul data-role="listview" data-inset="true" >
  
<li><a  href='#' onclick="$('#sideNoti').load('/quiz/start/{{quiz.id}}')"> {{quiz.title}} </a>
</li></ul>
{% endfor %}
  
{% else %}
<h2 style="color:#000000;">No Quizzes prepared for this lecture.</h1>

{% endif %}
    
</div>
</body>
</html>

